<template>
  <div class="specialty-list-wrapper">
    <v-header ref="header" title="特产"></v-header>
    <scroll ref="scroll" :data="specialtyList" :pullDownRefresh="true" :pullUpLoad="{ txt: { noMore: '没有更多的特产了~'} }" @pullingDown="onPullingDown" @pullingUp="onPullingUp">
      
      <ul class="specialty-list">
        <li v-for="item in specialtyList" :key="item.id" @click="clickSpecialty(item.id)">
          <div class="thumb" v-lazy:backgroundImage="item.thumbUrl"></div>
          <div class="info">
            <p class="name">{{item.name}}</p>
            <div class="bottom">
              <p class="comment"><span>{{item.commentCount}}</span>条评论</p>
              <p class="price"><span>￥</span>{{item.price}}</p>
            </div>
          </div>
        </li>
      </ul>

      
    </scroll>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'

import axios from '@/api/axiosApi'
export default {
  data() {
    return {
      pageNum: 1,
      specialtyList: []
    }
  },
  created() {
    this._getSpecialtyList()
  },
  mounted() {
    this.$refs.scroll.$el.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  components: {
    VHeader, Scroll
  },
  methods: {
    _getSpecialtyList() {
      axios.get(this, '/v1/featureProduct', {
        target_type: 2,
        pageNum: this.pageNum,
        pageSize: 10
      }, data => {
        if (data.length === 0) {
          if (this.pageNum <= 1) {
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullDown()
            }
          } else {
            this.pageNum--
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullUpLoad()
            }
          }
        }
        if (this.pageNum > 1) {
          this.specialtyList = this.specialtyList.concat(data)
        } else {
          this.specialtyList = data
        }
      })
    },
    onPullingUp() {
      this.pageNum++
      this._getSpecialtyList()
    },
    onPullingDown() {
      this.pageNum = 1
      this._getSpecialtyList()
    },
    clickSpecialty(id) {
      this.$router.push('/specialLocalProductDetail/' + id)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.specialty-list-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.specialty-list
  padding 8px 0
  background-color $color-background
  &:after
    display block
    content ''
    clear both
  li
    float left
    width calc(50vw - 4px)
    background #ffffff
    margin-bottom 8px
    &:nth-child(2n)
      margin-left 4px
    &:nth-child(2n + 1)
      margin-right 4px
  .thumb
    width calc(50vw - 4px)
    height calc(50vw - 4px)
    background-size cover
    background-position center
    background-repeat no-repeat
  .info
    padding 12px
  .name
    font-size 15px
    color #333
    no-wrap()
    line-height 1
    margin-bottom 12px
  .bottom
    display flex
    align-items center
    justify-content space-between
  .comment
    font-size 13px
    color #999
    line-height 1
    span
      color $color-level
  .price
    font-size 18px
    color $color-theme
    span
      font-size 12px
</style>
